Improving Visual Design

Latest update: July 2013

In this tutorial, we will show how to improve the visual of the Browser Utility we created in the previous tutorials. We will use a popular design framework Bootstrap .

Preparation

First, we need to download Bootstrap and jQuery , and copy them on the FlashAir.

Second, the firmware version 1.00s does not permit a long file name, so we will shorten the file name of the library files. We will show the example as follows. The original name is on the left side, and the path on the FlashAir with the shorten name is on the right side.

jquery-x.yy.z.min.js                          --> /SD_WLAN/js/jquery.js
bootstrap/js/bootstrap.min.js                 --> /SD_WLAN/js/bstrap.js
bootstrap/css/bootstrap.min.css               --> /SD_WLAN/css/bstrap.css
bootstrap/css/bootstrap-responsive.min.css    --> /SD_WLAN/css/bstrapr.css
bootstrap/img/glyphicons-halflings.png        --> /SD_WLAN/img/bstrap.png 
bootstrap/img/glyphicons-halflings-white.png  --> /SD_WLAN/img/bstrapw.png

As we have modified the file names, we need to correct bstrap.css.

../img/glyphicons-halflings.png       --> /SD_WLAN/img/bstrap.png
../img/glyphicons-halflings-white.png --> /SD_WLAN/img/bstrapw.png

Last, we will prepare two images: folder.png as an icon for directories, and other.png as an icon for files other than images. We will place them at following path on the FlashAir.

/SD_WLAN/img/folder.png
/SD_WLAN/img/other.png

Creating View Layout

We will create the HTML from the previous tutorial Web Tutorial 2 / Getting A List of Contents 1, however, we need some modifycation to apply the BootStrap.

Loading CSS

We need to load CSS files of the BootStrap in the <head> block.

<link href="/SD_WLAN/css/bstrap.css" rel="stylesheet" media="screen">
<link href="/SD_WLAN/css/bstrapr.css" rel="stylesheet" media="screen">

Loading JavaScript

We need to load JavaScript files of the jQuery, the BootStrap, and the program to be created in this tutorial. We will load it just after the <body> block by following the BootStrap requirements.

<script type="text/javascript" src="/SD_WLAN/js/jquery.js"></script>
<script type="text/javascript" src="/SD_WLAN/js/main.js"></script>
<script type="text/javascript" src="/SD_WLAN/js/bstrap.js"></script>
<script type="text/javascript">
wlansd = new Array();
<!--WLANSDJLST-->
</script>

Declaring Thumbnail Space

We will create a space to show thumbnails in the <body> block.

    <div class="container">
        <div class="row">
            <ul class="thumbnails" id="list">
            </ul>
        </div>
    </div>

Making a Menu Bar

We also will add a menu bar as a lot of web sites does. We can come back to the root directory when we click buttons labelled FlashAir or Home. We need add the following code in the <body> block.

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="/">FlashAir</a>
            <div class="nav-collapse collapse">
                <ul class="nav pull-right">
                    <li class="active"><a href="/"><i class="icon-home"></i>Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>

We need add the following code in <head> block, to make a space for menu bar use.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
  }
</style>

At last, the entirety of this HTML file is as follows:

/SD_WLAN/List.htm 

<!doctype html>
<html>
<head>
    <title>FlashAir</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="/SD_WLAN/css/bstrap.css" rel="stylesheet" media="screen">
    <link href="/SD_WLAN/css/bstrapr.css" rel="stylesheet" media="screen">
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="/">FlashAir</a>
                <div class="nav-collapse collapse">
                    <ul class="nav pull-right">
                        <li class="active"><a href="/"><i class="icon-home"></i>Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <ul class="thumbnails" id="list">
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="/SD_WLAN/js/jquery.js"></script>
    <script type="text/javascript" src="/SD_WLAN/js/main.js"></script>
    <script type="text/javascript" src="/SD_WLAN/js/bstrap.js"></script>
    <script type="text/javascript">
    wlansd = new Array();
    <!--WLANSDJLST-->
    </script>
</body>
</html>
  • Line 5:
    We will specify UTF-8 encoding to handle characters other than alphabet.
  • Lines 19-31:
    This code defines the menu. This menu will shrink to the small icon when the page is shown on the small screen such as smartphones', and will be collapsed and uncollapsed by tapping the icon.
  • Line 37:
    We will add thumbnail in this <ul> tag. Bootstrap's thumbnails class is set to the tag.
  • Lines 44-47:
    This is code to receive the FlashAir contents. Keep the main cast in your mind!

Changing Code

We will modify main.js to show thumbnails by applying the BootStrap design.

Thumbnail Style

If we set the BootStrap thumbnail class as a style for <a> tag of the images, the images will be shown with good look optimized to thubmbnail. Remind we set thumbnails class to <ul> tag in the HTML.

var filelink = $('<a class="thumbnail"></a>').attr('href', file["r_uri"] + '/' + file["fname"]);

Rounded Corner

We will make corners of thumbnails rounded by applying img-rounded class to <img> tag.

var img = $('<img class="img-rounded">');

After additional adjustments, The entirety of the program is as follows:

/SD_WLAN/js/main.js 

// Judge the card is V1 or V2.
function isV1(wlansd) {
    if ( wlansd.length == undefined || wlansd.length == 0 ) {
        // List is empty so the card version is not detectable. Assumes as V2.
        return false;
    } else if ( wlansd[0].length != undefined ) {
        // Each row in the list is array. V1.
        return true;
    } else {
        // Otherwise V2.
        return false;
    }
}
// Convert data format from V1 to V2.
function convertFileList(wlansd) {
    for (var i = 0; i < wlansd.length; i++) {
        var elements = wlansd[i].split(",");
        wlansd[i] = new Array();
        wlansd[i]["r_uri"] = elements[0];
        wlansd[i]["fname"] = elements[1];
        wlansd[i]["fsize"] = Number(elements[2]);
        wlansd[i]["attr"]  = Number(elements[3]);
        wlansd[i]["fdate"] = Number(elements[4]);
        wlansd[i]["ftime"] = Number(elements[5]);
    }
}
// Callback Function for sort()
function cmptime(a, b) {
    if( a["fdate"] == b["fdate"] ) {
        return a["ftime"] - b["ftime"];
    }else{
        return a["fdate"] - b["fdate"];
    }
}
// Show file list
function showFileList(path) {
    // Clear box.
    $("#list").html('');
    // Output a link to the parent directory if it is not the root directory.
    if ( path != "/" ) {
        // Make parent path
        var parentPath = path;
        if ( parentPath[parentPath.length - 1] != '/' ) {
            parentPath += '/';
        }
        parentPath += '..';
        // Make a link to the parent path.
        $("#list").append(
            $('<li class="span2"></li>')
                .append($('<a href="' + parentPath + '" class="thumbnail"></a>')
                    .append($('<img class="img-rounded" src="/SD_WLAN/img/folder.png">'))
                    .append($('<div class="img-caption">..</div>')))
        );
    }
    $.each(wlansd, function() {
        var file = this;
        // Skip hidden file
        if ( file["attr"] & 0x02 ) {
            return;
        }
        // Make a link to directories and files.
        var filelink = $('<a class="thumbnail"></a>').attr('href', file["r_uri"] + '/' + file["fname"]);
        var caption = $('<div class="img-caption" style="text-align: center;"></div>').html(file["fname"]);
        var fileobj = $('<li class="span2"></li>');
        var img = $('<img class="img-rounded">');
        if ( file["attr"] & 0x10 ) {
            img.attr("src", "/SD_WLAN/img/folder.png");
        } else {
            var array = file["fname"].split(".");
            var ext = array.length >= 2 ? array[array.length - 1] : '';
            if ( ext.toUpperCase() == "JPG" ) {
                img.attr("src", "/thumbnail.cgi?" + file["r_uri"] + '/' + file["fname"]);
            } else {
                img.attr("src", "/SD_WLAN/img/other.png");
            }
            filelink.addClass("file").attr("target","_blank");
        }
        // Append a file entry or directory to the end of the list.
        $("#list").append(
            fileobj.append(
                filelink.append(
                    img
                ).append(
                    caption
                )
            )
        );
    });     
}
//Document Ready
$(function() {
    if ( isV1(wlansd) ) {
        convertFileList(wlansd);
    }
    wlansd.sort(cmptime);
    showFileList(location.pathname);
});

Result

Open your web browser on your PC or smartphone connected to the FlashAir to check how the content list is shown.
Thumbnails are bigger and its corners are rounded. The screen shot on the left is captured on PC screen. Thumbnails are arranged as a grid. Two on the right are captures on smartphone screen. Single thumbnail is in the each row. And the menu bar is changed to the icon. You can collapse the menu by tapping the menu icon.

Browser Utility Tutorial 7 Result

More

There is an idea to arrange images as a collage. An another idea is to execute image processing by applying more techniques of JavaScript.

Let's try to create a unique Browser Utility with your idea and technique!

Browser Utility Tutorial 7 Example

Sample Code

web_tutorial_07.zip (5KB)

All sample code on this page is licensed under BSD 2-Clause License